বুটস্ট্রাপ জেএস কলাপ্স (collapse.js)
এটি একরডিয়ন এবং ন্যাভিগেশন এর মতো কলাপ্সিবল কম্পোনেন্টের জন্য মূল স্টাইল এবং নমনীয় সাপোর্ট প্রদান করে।
প্লাগ-ইন ডিপেনডেন্সিঃ কলাপ্সের জন্য আপনার বুটস্ট্রাপ ভার্সনে ট্রানজিশন প্লাগ-ইন অন্তর্ভুক্ত করা প্রয়োজন হয়।
কলাপ্সিবলের টিউটোরিয়ালের জন্য, আমাদের বুটস্ট্রাপ কলাপ্সিবল টিউটোরিয়ালটি পড়ুন।
কলাপ্স প্লাগ-ইন ক্লাসসমূহ
| ক্লাস | বিবরণ | উদাহরণ |
|---|---|---|
.collapse | কন্টেন্টকে হাইড করে। | উদাহরণ দেখুন |
.collapse in | কন্টেন্টকে প্রদর্শন করে। | উদাহরণ দেখুন |
.collapsing | যখন ট্রানজিশন শুরু হয় তখন যুক্ত করে, এবং যখন শেষ করে তখন রিমোভ করে। | উদাহরণ দেখুন |
বুটস্ট্রাপ data-* এট্রিবিউট মাধ্যম
একটি কলাপ্সিবল এলিমেন্টের নিয়ন্ত্রন স্বয়ংক্রিয়ভাবে অর্পন করার জন্য ঐ এলিমেন্টে শুধুমাত্র data-toggle="collapse" এবং data-target যুক্ত করুন। data-target এট্রিবিউটটি সিএসএস সিলেক্টরকে কলাপ্স প্রয়োগ করার জন্য গ্রহন করে। মনে রাখবেন যেন কলাপ্সিবল এলিমেন্টে কলাপ্স ক্লাস যুক্ত করা হয়। যদি আপনি ডিফল্টভাবে ওপেন রাখতে চান, তাহলে অতিরিক্ত ক্লাস .in যুক্ত করুন।
kt_satt_skill_example_id=1297
টিপসঃ কলাপ্সিবল কন্ট্রোলে গ্রুপ ম্যানেজমেন্টের মতো একরডিয়ন যুক্ত করতে data এট্রিবিউট data-parent="#selector" যুক্ত করুন।
বুটস্ট্রাপ জাভাস্ক্রিপ্ট মাধ্যম
ম্যানুয়েললি যুক্ত করার জন্যঃ
kt_satt_skill_example_id=1298
বুটস্ট্রাপ কলাপ্স মেথড
নিচের টেবিলে কলাপ্স মেথডগুলো দেয়া হলো।
| মেথড | বিবরণ | উদাহরণ |
|---|---|---|
.collapse("toggle") | কলাপ্সিবল এলিমেন্টকে টোগল করে। | উদাহরণ দেখুন |
.collapse("show") | কলাপ্সিবল এলিমেন্টকে প্রদর্শন করে। | উদাহরণ দেখুন |
.collapse("hide") | কলাপ্সিবল এলিমেন্টকে হাইড করে। | উদাহরণ দেখুন |
বুটস্ট্রাপ কলাপ্স ইভেন্ট
নিচের টেবিলে কলাপ্স ইভেন্টগুলো দেয়া হলো।
| ইভেন্ট | বিবরণ | উদাহরণ |
|---|---|---|
show.bs.collapse | কলাপ্সিবল এলিমেন্টটি প্রদর্শিত হওয়ার সময় ঘটে। | উদাহরণ দেখুন |
shown.bs.collapse | কলাপ্সিবল এলিমেন্টটি পুরোপুরি প্রদর্শিত হওয়ার পর ঘটে (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর) | উদাহরণ দেখুন |
hide.bs.collapse | কলাপ্সিবল এলিমেন্টটি হাইড হওয়ার ঘটে। | উদাহরণ দেখুন |
hidden.bs.collapse | কলাপ্সিবল এলিমেন্ট পুরোপুরি হাইড হওয়ার পর ঘটে। (সিএসএস ট্রানজিশন সম্পূর্ণ হওয়ার পর) | উদাহরণ দেখুন |
আরো উদাহরণ
আইকন বা টেক্সটকে এক্সপান্ড এবং কলাপ্স
নিচের উদাহরণে যখন কলাপ্সিবল কন্টেন্টটি ওপেন এবং ক্লোজ হয় তখন বাটনের টেক্সট এবং আইকন পরিবর্তিত হয়ঃ
kt_satt_skill_example_id=1299
Read more
